<div class="device-list col-12">
  <ng-tools-alert #alert [options]="alertOptions"></ng-tools-alert>
  <table class="table table-hover table-striped table-sm">
    <thead *ngIf="chargeTable?.options?.showHeaders">
    <tr>
      <th *ngFor="let header of chargeTable?.options?.headers">
        <ng-container>
          <div>
            <span class="text-bold-no-break">{{ header.displayName }}</span>
          </div>
        </ng-container>
      </th>
      <th class="text-center">操作</th>
    </tr>
    </thead>
    <tbody>
    <ng-container *ngIf="pagination?.page?.formattedResults?.length > 0">
      <tr *ngFor="let data of pagination?.page?.formattedResults; let rowIndex = index;">
        <td *ngFor="let header of chargeTable?.options.headers">
          <ng-container *ngIf="!header.dynamicComponent?.component">
            <span class="text-bold-no-break">{{ getProperty(data, header.propName) }}</span>
          </ng-container>
          <ng-tools-dynamic-component *ngIf="header.dynamicComponent?.component"
                                      [component]="header.dynamicComponent.component"
                                      [context]="[data, rowIndex]"
                                      [events]="header.dynamicComponent.events"
                                      [data]="getProperty(data, header.propName)"></ng-tools-dynamic-component>
        </td>
        <td class="text-center">
          <div class="operate-menu-wrap">
            <ng-container
              *ngFor="let btn of buttons[rowIndex]; let btnIndex=index;">
              <button *ngIf="btn.isShow" type="button" class="{{btn.btnClass }} font-75 ml-1 mr-1 text-center" (click)="btnClicked($event, btnIndex, rowIndex)">{{btn.text}}</button>
            </ng-container>
          </div>
        </td>
      </tr>
    </ng-container>
    <tr>
      <td *ngIf="pagination?.page?.formattedResults?.length === 0"
          [attr.colspan]="chargeTable?.options?.headers?.length + 1">
        暂时没有数据
      </td>
    </tr>
    </tbody>
  </table>


  <nav>
    <ul class="pagination pagination-sm justify-content-center mb-0">
      <li class="page-item">
        <span class="page-link" (click)="firstPage()">首页</span>
      </li>
      <li class="page-item"><span class="page-link" (click)="previousPage()">上一页</span></li>
      <li class="page-item jump">
      <span
        class="page-link">第{{ pagination?.page.pageNumber }}页/共{{ pagination?.page.totalPage }}页</span>
      </li>
      <li class="page-item"><span class="page-link" (click)="nextPage()">下一页</span></li>
      <li class="page-item">
        <span class="page-link" (click)="lastPage()">末页</span>
      </li>
    </ul>
  </nav>
</div>
<ng-tools-modal #modal></ng-tools-modal>
